<script setup lang="ts">
defineOptions({
  name: "CrudContainer"
});
</script>

<template>
  <div class="crud-container">
    <slot />
  </div>
</template>

<style lang="scss" scoped>
.crud-container {
  padding: 12px;
  background-color: var(--el-bg-color);
  height: calc(100% - 16px);
  :deep(.avue-crud) {
    height: 100%;
    display: flex;
    flex-direction: column;
    .avue-crud__body {
      flex-grow: 1;
      height: 0;
      .el-card__body {
        height: 100%;
        display: flex;
        flex-direction: column;
        > .el-form {
          flex-grow: 1;
          height: 0;
        }
      }
    }
  }
}
</style>
